<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计分析</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        .status-item {
            display: flex;
            align-items: center;
        }
        .time {
            font-weight: bold;
        }
        .doctor-info {
            margin-left: 20px;
        }
        .notification {
            position: relative;
            margin-right: 20px;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .search-box {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .stats-container {
            margin: 20px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .department-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        .tab.active {
            border-bottom: 2px solid #2196F3;
            color: #2196F3;
            font-weight: bold;
        }
        .status-card {
            margin-bottom: 20px;
        }
        .status-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        .progress-bar {
            height: 20px;
            background: #f5f5f5;
            border-radius: 10px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            display: inline-block;
        }
        .progress-normal {
            background: #4CAF50;
        }
        .progress-warning {
            background: #FFC107;
        }
        .progress-danger {
            background: #FF5722;
        }
        .status-count {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="status-bar">
        <div class="status-item">
            <div class="time" id="current-time"></div>
            <div class="doctor-info">
                <span id="doctor-name">张医生</span>
                <span id="doctor-department"> - 内科</span>
                <span id="doctor-title"> - 主任医师</span>
            </div>
        </div>
        <div class="status-item">
            <input type="text" class="search-box" placeholder="患者姓名/床号">
        </div>
    </div>

    <div class="stats-container">
        <h3 style="margin-top: 0;">科室患者状态统计</h3>
        
        <div class="department-tabs">
            <div class="tab active" onclick="filterByDepartment('all')">全部</div>
            <div class="tab" onclick="filterByDepartment('icu')">ICU</div>
            <div class="tab" onclick="filterByDepartment('cardiology')">心内科</div>
            <div class="tab" onclick="filterByDepartment('neurology')">神经科</div>
            <div class="tab" onclick="filterByDepartment('orthopedics')">骨科</div>
        </div>

        <div class="status-card">
            <div class="status-title">患者状态分布</div>
            <div class="progress-bar">
                <div class="progress progress-normal" style="width: 60%;"></div>
                <div class="progress progress-warning" style="width: 25%;"></div>
                <div class="progress progress-danger" style="width: 15%;"></div>
            </div>
            <div class="status-count">
                <span>正常: 60人</span>
                <span>警告: 25人</span>
                <span>危险: 15人</span>
            </div>
        </div>

        <div class="status-card">
            <div class="status-title">ICU 患者状态</div>
            <div class="progress-bar">
                <div class="progress progress-normal" style="width: 40%;"></div>
                <div class="progress progress-warning" style="width: 30%;"></div>
                <div class="progress progress-danger" style="width: 30%;"></div>
            </div>
            <div class="status-count">
                <span>正常: 8人</span>
                <span>警告: 6人</span>
                <span>危险: 6人</span>
            </div>
        </div>

        <div class="status-card">
            <div class="status-title">心内科 患者状态</div>
            <div class="progress-bar">
                <div class="progress progress-normal" style="width: 70%;"></div>
                <div class="progress progress-warning" style="width: 20%;"></div>
                <div class="progress progress-danger" style="width: 10%;"></div>
            </div>
            <div class="status-count">
                <span>正常: 21人</span>
                <span>警告: 6人</span>
                <span>危险: 3人</span>
            </div>
        </div>
    </div>

    <script>
        // 更新时间
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = now.toLocaleTimeString();
        }
        setInterval(updateTime, 1000);
        updateTime();

        // 模拟医生信息
        document.getElementById('doctor-name').textContent = '张医生';
        document.getElementById('doctor-department').textContent = ' - 内科';
        document.getElementById('doctor-title').textContent = ' - 主任医师';

        // 科室筛选
        function filterByDepartment(department) {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            
            // 这里应该根据科室筛选数据并更新显示
            // 实际应用中应从后端获取数据
            console.log('筛选科室:', department);
        }
    </script>
</body>
</html>